<template>
  <a-card>
    <a-tabs defaultActiveKey="1" style="margin-top: 5px;">
      <a-tab-pane tab="付款方式" key="1">
        <a-row>
          <a-col :span="24">
            <a-form-item
              :labelCol="{span:4  }" :wrapperCol="{span:16}">
              <span slot="label" style="line-height: 5.5;">零余额(元)</span>
              <span style="margin-left: 20px;margin-right: 5px">借:</span>
              <a-input-number :max="999999999.99"
                              :disabled="disabled"
                              :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                              :parser="value => value.replace(/(,*)/g, '').match(/^\d*(\.?\d{0,2})/g)[0] || ''"
                              style="width: 45%" :min="0" :step="0.01" :precision="2" v-model="model.zeroAmountLend" placeholder="0.00"/>
              <br>
              <span style="margin-left: 20px;margin-right: 5px">贷:</span>
              <a-input-number :max="999999999.99"
                              :disabled="disabled"
                              :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                              :parser="value => value.replace(/(,*)/g, '').match(/^\d*(\.?\d{0,2})/g)[0] || ''"
                              style="width: 45%" :min="0" :step="0.01" :precision="2" v-model="model.zeroAmountLoan" placeholder="0.00"/>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="24">
            <a-form-item
              :labelCol="{span:4  }" :wrapperCol="{span:16}">
              <span slot="label" style="line-height: 5.5;">基本户(元)</span>
              <span style="margin-left: 20px;margin-right: 5px">借:</span>
              <a-input-number :max="999999999.99"
                              :disabled="disabled"
                              :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                              :parser="value => value.replace(/(,*)/g, '').match(/^\d*(\.?\d{0,2})/g)[0] || ''"
                              style="width: 45%;color: red" :min="0" :step="0.01" :precision="2" v-model="model.baseAmountLend" placeholder="0.00"/>
              <br>
              <span style="margin-left: 20px;margin-right: 5px">贷:</span>
              <a-input-number :max="999999999.99"
                              :disabled="disabled"
                              :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                              :parser="value => value.replace(/(,*)/g, '').match(/^\d*(\.?\d{0,2})/g)[0] || ''"
                              style="width: 45%;color: red" :min="0" :step="0.01" :precision="2" v-model="model.baseAmountLoan" placeholder="0.00"/>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="24">
            <a-form-item
              :labelCol="{span:4  }" :wrapperCol="{span:16}">
              <span slot="label" style="line-height: 5.5;">库存金额(元)</span>
              <span style="margin-left: 20px;margin-right: 5px">借:</span>
              <a-input-number :max="999999999.99"
                              :disabled="disabled"
                              :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                              :parser="value => value.replace(/(,*)/g, '').match(/^\d*(\.?\d{0,2})/g)[0] || ''"
                              style="width: 45%;color: red" :min="0" :step="0.01" :precision="2" v-model="model.inventoryAmountLend" placeholder="0.00"/>
              <br>
              <span style="margin-left: 20px;margin-right: 5px">贷:</span>
              <a-input-number :max="999999999.99"
                              :disabled="disabled"
                              :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                              :parser="value => value.replace(/(,*)/g, '').match(/^\d*(\.?\d{0,2})/g)[0] || ''"
                              style="width: 45%;color: red" :min="0" :step="0.01" :precision="2" v-model="model.inventoryAmountLoan" placeholder="0.00"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
  import Vue from 'vue'
  import { SOURCE_NAME } from '@/store/mutation-types'
  import { REDIS_INDEX } from '@/store/mutation-types'
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  import {putAction,postAction,getAction} from '@/api/manage';

  export default {
    name: 'LoanInfoInFlowModal',
    props: {
      reimbId: String
    },
    data(){
      return{
        totalAmount:0,
        disabled:false,
        model:{
          zeroAmountLend:'',
          zeroAmountLoan:'',
          baseAmountLend:'',
          baseAmountLoan:'',
          inventoryAmountLend:'',
          inventoryAmountLoan:'',
        },
        headers:{},
        url: {
          queryByReimbId:'/expenditure/expenditureReimbLoanInfo/queryByReimbId',
          addOrUpdate:'/expenditure/expenditureReimbLoanInfo/addOrUpdate',
          queryById:'/reimb/expenditureReimbInfo/queryById'
        }
      }
    },
    created() {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token":token,
        "sourceName":Vue.ls.get(SOURCE_NAME),
        "redisIndex":Vue.ls.get(REDIS_INDEX)
      };
    },
    computed:{

    },
    methods: {
      initData(disabled){
        this.disabled = disabled
        getAction(this.url.queryByReimbId,{reimbId:this.reimbId}).then(res=>{
          if(res.success && res.result && res.result.length>0){
            this.model = res.result[0]
          }else{
            this.model = {zeroAmountLend:'', zeroAmountLoan:'',
              baseAmountLend:'', baseAmountLoan:'',
              inventoryAmountLend:'', inventoryAmountLoan:''}
          }
        })
        getAction(this.url.queryById,{id:this.reimbId}).then(res=>{
          if(res.success){
            this.totalAmount = res.result.totalamount
          }else{
            this.totalAmount = 0
          }
        })
      },
      handleOk(){
        return new Promise((resolve, reject) => {
          let amount = (this.model.zeroAmountLoan?Number(this.model.zeroAmountLoan):0 +
            this.model.baseAmountLoan?Number(this.model.baseAmountLoan):0 +
            this.model.inventoryAmountLoan?Number(this.model.inventoryAmountLoan):0).toFixed(2)


          if(amount>Number(this.totalAmount).toFixed(2) && this.totalAmount!==0){
            this.$message.error("付款金额大于报销金额,请确认!")
            reject(0)
            return false
          }



          this.model.reimbId = this.reimbId
          postAction(this.url.addOrUpdate,this.model).then(res=>{
            if(!res.success){
              this.$message.error("付款方式保存失败")
              reject(0)
              return false
            }
            resolve(1)
            return true
          })
        })
      },
      handleCancel: function(){
        this.visible = false;
      },
    }
  }
</script>

<style scoped>
  .ant-form-item-label{
    line-height: 75px !important;
  }
</style>